<template>
  <div v-loading="loading">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="dataForm">
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('楼号')" prop="floor">
            <el-input v-model="form.floor" :placeholder="$t('楼号')" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('证照类型')" prop="licenseType">
            <el-select v-model="form.licenseType" clearable filterable :placeholder="$t('证照类型')">
              <el-option
                v-for="dict in licenseTypeOptions"
                :key="dict.dictValue"
                :label="$t(dict.dictLabel)"
                :value="dict.dictValue"
                @click.native="typeReset(form)"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('证号')" prop="certificateNumber">
            <el-input v-model="form.certificateNumber" :placeholder="$t('证号')" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="form.licenseType === 'state_owned_land'" :label="$t('土地使用权人')" prop="landUseRightsHolder">
            <el-input v-model="form.landUseRightsHolder" :placeholder="$t('土地使用权人')" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="form.licenseType === 'real_estate' || form.licenseType === 'state_owned_land'" :label="$t('坐落')" prop="located">
            <el-input v-model="form.located" :placeholder="$t('坐落')" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="form.licenseType === 'state_owned_land'" :label="$t('地号')" prop="placeNumber">
            <el-input v-model="form.placeNumber" :placeholder="$t('地号')" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="form.licenseType === 'state_owned_land'" :label="$t('图号')" prop="drawingNumber">
            <el-input v-model="form.drawingNumber" :placeholder="$t('图号')" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="form.licenseType === 'state_owned_land'" :label="$t('使用权类型')" prop="useTheRightType">
            <el-input v-model="form.useTheRightType" :placeholder="$t('使用权类型')" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="form.licenseType === 'state_owned_land'" :label="$t('地类(用途)')" prop="landType">
            <el-input v-model="form.landType" :placeholder="$t('地类(用途)')" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="form.licenseType === 'state_owned_land'" :label="$t('使用面积')" prop="usageArea">
            <el-input-number v-model="form.usageArea" :placeholder="$t('使用面积')" show-word-limit />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="form.licenseType === 'state_owned_land'" :label="$t('终止日期')" prop="endDate">
            <!--            <el-input v-model="form.endDate" :placeholder="$t('终止日期')" show-word-limit maxlength="100" />-->
            <el-date-picker
              v-model="form.endDate"
              clearable
              style="width: 200px"
              type="date"
              value-format="yyyy-MM-dd"
              :placeholder="$t('终止日期')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="form.licenseType === 'real_estate'" :label="$t('权利人')" prop="rightHolder">
            <el-input v-model="form.rightHolder" :placeholder="$t('权利人')" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="form.licenseType === 'real_estate'" :label="$t('室号部位')" prop="roomNumber">
            <el-input v-model="form.roomNumber" :placeholder="$t('室号部位')" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="form.licenseType === 'real_estate'" :label="$t('权利类型')" prop="entitlementType">
            <el-input v-model="form.entitlementType" :placeholder="$t('权利类型')" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="form.licenseType === 'real_estate'" :label="$t('权利性质')" prop="rightsNature">
            <el-input v-model="form.rightsNature" :placeholder="$t('权利性质')" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="form.licenseType === 'real_estate'" :label="$t('用途')" prop="use">
            <el-input v-model="form.use" :placeholder="$t('用途')" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="form.licenseType === 'real_estate'" :label="$t('面积')" prop="area">
            <!--            <el-input-number v-model="form.area" :placeholder="$t('面积')" show-word-limit />-->
            <el-input v-model="form.area" :placeholder="$t('面积')" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="form.licenseType === 'real_estate'" :label="$t('使用期限')" prop="usePeriod">
            <el-input v-model="form.usePeriod" :placeholder="$t('使用期限')" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="form.licenseType === 'real_estate'" :label="$t('附记')" prop="postscript">
            <el-input v-model="form.postscript" :placeholder="$t('附记')" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="form.licenseType === 'home_ownership_certificate'" :label="$t('房屋所有权人')" prop="houseOwner">
            <el-input v-model="form.houseOwner" :placeholder="$t('房屋所有权人')" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="form.licenseType === 'home_ownership_certificate'" :label="$t('房屋坐落')" prop="houseLocated">
            <el-input v-model="form.houseLocated" :placeholder="$t('房屋坐落')" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="form.licenseType === 'home_ownership_certificate'" :label="$t('共有情况')" prop="sharedSituation">
            <el-input v-model="form.sharedSituation" :placeholder="$t('共有情况')" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="form.licenseType === 'home_ownership_certificate'" :label="$t('登记日期')" prop="registrationDate">
            <el-date-picker
              v-model="form.registrationDate"
              clearable
              style="width: 200px"
              type="date"
              value-format="yyyy-MM-dd"
              :placeholder="$t('登记日期')"
            />
          </el-form-item>
        </el-col>
        <el-col v-if="form.licenseType === 'home_ownership_certificate'" :span="12">
          <el-form-item :label="$t('房屋性质')" prop="natureOfHouse">
            <el-input v-model="form.natureOfHouse" :placeholder="$t('房屋性质')" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="form.licenseType === 'home_ownership_certificate'" :label="$t('规划用途')" prop="planningPurposes">
            <el-input v-model="form.planningPurposes" :placeholder="$t('规划用途')" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="form.licenseType === 'home_ownership_certificate'" :label="$t('建筑面积')" prop="constructionSite">
            <!--            <el-input-number v-model="form.constructionSite" :placeholder="$t('建筑面积')" show-word-limit />-->
            <el-input v-model="form.constructionSite" :placeholder="$t('建筑面积')" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="form.licenseType === 'home_ownership_certificate'" :label="$t('房屋总层数')" prop="totalNumberFloors">
            <el-input v-model="form.totalNumberFloors" :placeholder="$t('房屋总层数')" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="form.licenseType === 'home_ownership_certificate'" :label="$t('结构')" prop="structure">
            <el-input v-model="form.structure" :placeholder="$t('结构')" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('备注')" prop="remark">
            <el-input v-model="form.remark" type="textarea" :placeholder="$t('备注')" show-word-limit maxlength="2000" />
          </el-form-item>
        </el-col>
      </el-row>

      <!--物业详情-->
      <div class="area-header">
        <span class="area-header-title">{{ $t('物业详情') }}</span>
      </div>
      <el-table :data="form.dealLicenseDetailsList" border class="nowrapTable formTable">
        <el-table-column :label="$t('序号')" align="center" width="50">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>s
        <el-table-column :label="$t('所在层')" align="center">
          <template slot="header" slot-scope="{}">
            <i style="color: #ff4949;margin-right: 4px;">*</i>
            <span>{{ $t('所在层') }}</span>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="'dealLicenseDetailsList.' + scope.$index + '.layer'" :rules="dealLicenseDetailsListRules.layer">

              <el-input v-model="scope.row.layer" :placeholder="$t('所在层')" show-word-limit maxlength="100" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column :label="$t('房号')" align="center">
          <template slot="header" slot-scope="{}">
            <i style="color: #ff4949;margin-right: 4px;">*</i>
            <span>{{ $t('房号') }}</span>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="'dealLicenseDetailsList.' + scope.$index + '.roomNo'" :rules="dealLicenseDetailsListRules.roomNo">
              <el-input v-model="scope.row.roomNo" :placeholder="$t('房号')" show-word-limit maxlength="100" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column :label="$t('建筑面积（㎡）')" align="center">
          <template slot="header" slot-scope="{}">
            <i style="color: #ff4949;margin-right: 4px;">*</i>
            <span>{{ $t('建筑面积（㎡）') }}</span>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="'dealLicenseDetailsList.' + scope.$index + '.constructionArea'" :rules="dealLicenseDetailsListRules.constructionArea">
              <el-input-number v-model="scope.row.constructionArea" :placeholder="$t('建筑面积（㎡）')" show-word-limit precision="2" max="999999999999999999" />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column :label="$t('用途')" align="center">
          <template slot="header" slot-scope="{}">
            <i style="color: #ff4949;margin-right: 4px;">*</i>
            <span>{{ $t('用途') }}</span>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="'dealLicenseDetailsList.' + scope.$index + '.use'" :rules="dealLicenseDetailsListRules.use">
              <el-select v-model="scope.row.use" clearable filterable :placeholder="$t('用途')">
                <el-option
                  v-for="dict in useOptions"
                  :key="dict.dictValue"
                  :label="$t(dict.dictLabel)"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column :label="$t('备注')" align="center">
          <template slot="header" slot-scope="{}">
            <span>{{ $t('备注') }}</span>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="'dealLicenseDetailsList.' + scope.$index + '.remark'" :rules="dealLicenseDetailsListRules.remark">
              <el-input v-model="scope.row.remark" :placeholder="$t('备注')" show-word-limit maxlength="2000" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column v-if="!otherBtnHide" :label="$t('操作')" align="center" width="60px">
          <template slot-scope="scope">
            <el-button v-hasPermi="['deal:license:remove']" size="small" type="text" icon="el-icon-delete" @click="delDetailsHandle(scope.$index, scope.row)" />
          </template>
        </el-table-column>
      </el-table>
      <div v-if="!otherBtnHide" class="tol">
        <el-button v-hasPermi="['deal:license:edit']" type="primary" icon="el-icon-plus" size="mini" @click="addDetails">{{ $t('添加详情') }}</el-button>
        <el-button
          v-hasPermi="['deal:license:export']"
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="exportHandle"
        >{{ $t('导出') }}</el-button>
      </div>
      <!-- 附件列表 -->
      <FileTable has-permi="deal:license" :list.sync="form.fileList" data-type="deal_license" :business-id="form.dealId" :btn-show="!otherBtnHide" />
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: right;">
      <!--保存 取消按钮-->
      <save-btn has-permi="deal:license" />
    </div>
  </div>
</template>

<script>
import { saveDealLicense, getDealLicense, delDealLicenseDetails, listDealLicense } from '@/api/deal/license/dealLicense'
    export default {
        data() {
          var checkCertificateNumber = (rule, value, callback) => {
            console.info(this.form)
            if (value === '' || value === undefined || value == null) {
              callback(new Error('必填信息'))
            } else {
              this.dealLicenseList.forEach(item => {
                if (this.form.id !== item.id) {
                    if (this.form.certificateNumber === item.certificateNumber) {
                      callback(new Error('证号重复'))
                    }
                }
              })
              callback()
            }
          }
            return {
                // 表单参数
                form: {
                  dealLicenseDetailsList: []
                },
                // 表单校验
                rules: {
                    floor: [
                        { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                    ],
                    licenseType: [
                        { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                    ],
                    certificateNumber: [
                        { required: true, validator: checkCertificateNumber, trigger: 'blur' }
                    ]
                },
                dealLicenseDetailsListRules: {
                  layer: [{ required: true, message: this.$t('必填信息'), trigger: 'blur' }],
                  roomNo: [{ required: true, message: this.$t('必填信息'), trigger: 'blur' }],
                  constructionArea: [{ required: true, message: this.$t('必填信息'), trigger: 'blur' }],
                  use: [{ required: true, message: this.$t('必填信息'), trigger: 'blur' }]
                },
                // 遮罩层
                loading: false,
                // 操作按钮默认不展示
                buttonShow: true,
                // 是否隐藏保存按钮
                otherBtnHide: false,
                // 用途类型 字典
                useOptions: [],
                licenseTypeOptions: [],
                dealLicenseList: []
            }
        },
        created() {
            this.getDicts('deal_license_type').then(response => {
                this.licenseTypeOptions = response.data
            })
            this.getDicts('license_details_use').then(response => {
              this.useOptions = response.data
            })
            this.$bus.$emit('async_done')

            listDealLicense({ dealId: this.$route.query.id }).then(response => {
              this.dealLicenseList = response.rows
            })
        },
        methods: {
          // 初始化数据
           init(data) {
            this.loading = true
            if (data != null && data.id !== undefined) {
              getDealLicense(data.id).then(response => {
                this.form = response.data
                this.loading = false
              }).catch(() => {
                this.loading = false
              })
            } else {
              this.reset()
              this.loading = false
            }
          },
            // 表单重置
            reset() {
                this.form = {
                    id: undefined,
                    dealId: this.$route.query.id,
                    floor: undefined,
                    licenseType: undefined,
                    certificateNumber: undefined,
                    landUseRightsHolder: undefined,
                    located: undefined,
                    placeNumber: undefined,
                    drawingNumber: undefined,
                    useTheRightType: undefined,
                    landType: undefined,
                    usageArea: undefined,
                    endDate: undefined,
                    rightHolder: undefined,
                    roomNumber: undefined,
                    entitlementType: undefined,
                    rightsNature: undefined,
                    use: undefined,
                    area: undefined,
                    usePeriod: undefined,
                    postscript: undefined,
                    houseOwner: undefined,
                    houseLocated: undefined,
                    sharedSituation: undefined,
                    registrationDate: undefined,
                    natureOfHouse: undefined,
                    planningPurposes: undefined,
                    constructionSite: undefined,
                    totalNumberFloors: undefined,
                    structure: undefined,
                    remark: undefined,
                    createBy: undefined,
                    createTime: undefined,
                    updateBy: undefined,
                    updateTime: undefined,
                    delFlag: undefined
                }
                this.resetForm('form')
            },

            // 取消按钮
            cancel() {
                this.$parent.$parent.formOpen = false
                this.$parent.$parent.reset()
            },
            // 关闭form页面
            closeForm() {
                // 关闭form页面遮罩层
                this.loading = false
                // 关闭form页面
                if (this.$parent.$parent.formOpen !== undefined) {
                    this.$parent.$parent.formOpen = false
                }
                // 刷新list页面
                if (this.$parent.$parent.getList !== undefined) {
                  this.$parent.$parent.getList()
                }
            },
            /** 导出按钮操作 */
            exportHandle() {
              this.downLoadExcel('/license/dealLicense/export', { id: this.form.id })
            },
            /** 提交按钮 */
            submitForm() {
              this.$refs['form'].validate(valid => {
                if (valid) {
                  this.loading = true
                  saveDealLicense(this.form).then(response => {
                    if (response.code === 200) {
                      this.msgSuccess(this.$t('保存成功'))
                      this.closeForm()
                    } else {
                      this.msgError(response.msg)
                    }
                    this.loading = false
                  })
                } else {
                  this.locationError(document)
                }
                this.loading = false
              }).catch(() => {
                this.loading = false
              })
            },
            // 删除物业详情
            delDetailsHandle(index, row) {
              const id = row.id
              if (id !== undefined && id !== '' && id != null) {
                this.$confirm(this.$t('是否确认删除?'), this.$t('警告'), {
                  confirmButtonText: this.$t('确定'),
                  cancelButtonText: this.$t('取消'),
                  type: 'warning'
                })
                  .then(function() {
                    return delDealLicenseDetails(id)
                  }).then(() => {
                  this.form.dealLicenseDetailsList.splice(index, 1)
                  return this.msgSuccess(this.$t('删除成功'))
                })
                  .catch(function() {})
              } else {
                this.form.dealLicenseDetailsList.splice(index, 1)
              }
            },
            // 文件明细
            addDetails() {
              const row = {
                id: undefined,
                layer: '',
                roomNo: '',
                constructionArea: '',
                use: '',
                remark: ''
              }
              if (!(this.form.dealLicenseDetailsList instanceof Array)) {
                this.$set(this.form, 'dealLicenseDetailsList', [])
              }
              this.$nextTick(() => {
                this.form.dealLicenseDetailsList.push(row)
              })
            },
            empty(row) {
              row.use = undefined
            },
            // 表单重置
             typeReset(row) {
              this.form = {
                id: row.id,
                dealId: row.dealId,
                floor: row.floor,
                licenseType: row.licenseType,
                certificateNumber: row.certificateNumber,
                dealLicenseDetailsList: row.dealLicenseDetailsList,
                landUseRightsHolder: undefined,
                located: undefined,
                placeNumber: undefined,
                drawingNumber: undefined,
                useTheRightType: undefined,
                landType: undefined,
                usageArea: undefined,
                endDate: undefined,
                rightHolder: undefined,
                roomNumber: undefined,
                entitlementType: undefined,
                rightsNature: undefined,
                use: undefined,
                area: undefined,
                usePeriod: undefined,
                postscript: undefined,
                houseOwner: undefined,
                houseLocated: undefined,
                sharedSituation: undefined,
                registrationDate: undefined,
                natureOfHouse: undefined,
                planningPurposes: undefined,
                constructionSite: undefined,
                totalNumberFloors: undefined,
                structure: undefined
              }
              this.resetForm('form')
            }
        }

    }
</script>
